<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>16款纯CSS3实现的loading加载动画</title>

<style>
body {
	background: #f3f6f9;
	font-family: sans-serif;
	font-weight: 100;
	font-size: 14px;
	margin: 0;
	padding: 20px;
}

.grid {
	overflow: hidden;
}

.cell {
	float: left;
	width: 25%;
	box-sizing: border-box;
	padding: 20px;
	display: table;
}

.card {
	background: white;
	border: 1px solid #c3c6cf;
	border-radius: 15px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	height: 200px;
}
</style>

<!--加载图标样式-->
<link rel="stylesheet" href="css/spinners.css" type="text/css">

</head>
<body>

<div class="grid">

	<div class="cell">
		<div class="card">
			<span class="spinner-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="throbber-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="refreshing-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="heartbeat-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="gauge-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="timer-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="three-quarters-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="wobblebar-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="atebits-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="whirly-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="flower-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="dots-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="circles-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="plus-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="ball-loader">Loading&#8230;</span>
		</div>
	</div>

	<div class="cell">
		<div class="card">
			<span class="hexdots-loader">Loading&#8230;</span>
		</div>
	</div>

</div>

</body>
</html>